<template>
  <router-layout class="error">
    <van-nav-bar slot="header" v-if="!hide" left-arrow :border="false" @click-left="$router.back()" />
    <template v-if="state == '104'">
      <img src="../../../assets/icon/edit.svg" />
      <div class="error-desc">{{ message }}</div>
    </template>
    <template v-else-if="state == '403'">
      <img src="../../../assets/icon/loading.svg" />
      <div class="error-desc">{{ message || '抱歉，你无权访问该页面' }}</div>
    </template>
    <template v-else-if="state == '500'">
      <img src="../../../assets/icon/500.svg" />
      <div class="error-desc">{{ message || '抱歉，服务器出错了' }}</div>
    </template>
    <template v-else>
      <img src="../../../assets/icon/404.svg" />
      <div class="error-desc">{{ message || '抱歉，你访问的页面不存在或仍在开发中' }}</div>
    </template>
    <div class="error-extra" v-if="!hide">
      <van-button round block type="info" to="/">返回首页</van-button>
      <van-button round block @click="$router.back()">后 退</van-button>
    </div>
  </router-layout>
</template>
<script>
import { NavBar } from 'vant'
export default {
  components: {
    [NavBar.name]: NavBar
  },
  data() {
    return {
      hide: false, //隐藏按钮
      state: null,
      message: undefined
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.state = to.params.state
      if (to.query?.message) {
        vm.message = to.query.message
      } else vm.message = undefined
      if (to.query?.hide) {
        vm.hide = Boolean(to.query.hide)
      }
    })
  },
  beforeRouteUpdate(to, from, next) {
    this.state = to.params.state
    if (to.query?.message) {
      this.message = to.query.message
    } else this.message = undefined
    if (to.query?.hide) {
      this.hide = Boolean(to.query.hide)
    }
    next()
  }
}
</script>
<style lang="less" scoped>
.error {
  background-color: white;
  &-extra {
    padding: 32px;
    button {
      margin-top: 14px;
    }
    :first-child {
      margin-top: 0;
    }
  }
  &-desc {
    padding: 0 32px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
  }
}
</style>
